import { Skeleton } from '@shared/ui/Skeleton'
import { MenuTitle } from '../MenuTitle/MenuTitle'
import styles from './MenuSkeleton.module.scss'

interface MenuSkeletonProps {
  title?: string
}

export const MenuSkeleton = ({ title }: MenuSkeletonProps) => {
  const skeletonCount = title ? 3 : 4

  return (
    <>
      {title && <MenuTitle title={title} />}
      {Array.from({ length: skeletonCount }, (_, index) => (
        <div className={styles.wrapper} key={index}>
          {/* <Skeleton height='24px' radius='6px' width='24px' /> */}
          <Skeleton height='24px' shadow width='100%' />
        </div>
      ))}
    </>
  )
}

MenuSkeleton.displayName = 'MenuSkeleton'
